<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>General | Perfect Admin - Responsive HTML5 Admin Template</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="Perfect Admin - Responsive HTML5 Admin Template">
	<meta name="author" content="perfectusinc.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Google Web Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- Custom CSS Starts -->
    <link rel="stylesheet" href="../../assets/css/skin/all-skins.css">
    <link rel="stylesheet" href="../../assets/css/general/style.css">
    <link rel="stylesheet" href="../../assets/css/sidebar/side-nav.css">
	<link rel="stylesheet" href="../../assets/css/fonts/fonts-style.css">
	<link rel="stylesheet" href="../../assets/css/nanoscroller/nanoscroller.css">
</head>

<body class="sidebar-mini fixed skin-blue">
    <div class="wrapper">
		<!-- Header Section Starts -->
		<header class="main-header">
			<!-- Logo -->
			<a href="../../index2.html" class="logo">
				<!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"><b>P</b>AD</span>
				<!-- logo for regular state and mobile devices -->
				<span class="logo-lg"><b>Perfect </b>Admin</span>
			</a>
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
					<span class="sr-only">Toggle navigation</span>
				</a>

				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- Messages Section Starts-->
						<li class="dropdown messages-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-envelope-o"></i>
								<span class="label label-success">4</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 4 messages</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<li>
											<!-- Message Area Starts -->
											<a href="#">
												<h4>
													Support Team
													<small><i class="fa fa-clock-o"></i> 5 mins</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<!-- Message Area Ends -->
										<li>
											<a href="#">
												<h4>
													Perfectus Design Team
													<small><i class="fa fa-clock-o"></i> 2 hours</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Developers
													<small><i class="fa fa-clock-o"></i> Today</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Sales Department
													<small><i class="fa fa-clock-o"></i> Yesterday</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Reviewers
													<small><i class="fa fa-clock-o"></i> 2 days</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
									</ul>
								</li>
								<li class="footer"><a href="#">See All Messages</a></li>
							</ul>
						</li>
						<!-- Messages Section Ends-->
						<!-- Notifications Section Starts -->
						<li class="dropdown notifications-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-bell-o"></i>
								<span class="label label-warning">10</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 10 notifications</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<li>
											<a href="#">
												<i class="fa fa-users text-aqua"></i> 5 new members joined today
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-users text-red"></i> 5 new members joined
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-shopping-cart text-green"></i> 25 sales made
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-user text-red"></i> You changed your username
											</a>
										</li>
									</ul>
								</li>
								<li class="footer"><a href="#">View all</a></li>
							</ul>
						</li>
						<!-- Notifications Section Ends -->
						<!-- Tasks Section Starts -->
						<li class="dropdown tasks-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-flag-o"></i>
								<span class="label label-danger">9</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 9 tasks</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<!-- Task Item Starts -->
										<li>
											<a href="#">
												<h3>
													Design some buttons
													<small class="pull-right">20%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">20% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Create a nice theme
													<small class="pull-right">40%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">40% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Some task I need to do
													<small class="pull-right">60%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">60% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Make beautiful transitions
													<small class="pull-right">80%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">80% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- Task Item Ends -->
									</ul>
								</li>
								<li class="footer">
									<a href="#">View all tasks</a>
								</li>
							</ul>
						</li>
						<!-- Tasks Section Ends -->
						<!-- User Account Section Starts -->
						<li class="dropdown user user-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<img src="../../assets/images/user2-160x160.jpg" class="user-image" alt="User Image">
								<span class="d-none d-sm-block">Alexander Pierce</span>
							</a>
							<ul class="dropdown-menu">
								<!-- User Image Starts -->
								<li class="user-header">
									<img src="../../assets/images/user2-160x160.jpg" class="img-circle" alt="User Image">
									<p>
										Alexander Pierce - Web Developer
										<small>Member since Nov. 2012</small>
									</p>
								</li>
								<!-- User Image Starts -->
								<!-- Menu Body Starts -->
								<li class="user-body">
									<div class="row">
										<div class="col-4 text-center">
											<a href="#">Followers</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Sales</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Friends</a>
										</div>
									</div>
								</li>
								<!-- Menu Body Ends -->
								<!-- Menu Footer Starts -->
								<li class="user-footer">
									<div class="pull-left">
										<a href="#" class="btn btn-default btn-flat">Profile</a>
									</div>
									<div class="pull-right">
										<a href="#" class="btn btn-default btn-flat">Sign out</a>
									</div>
								</li>
								<!-- Menu Footer Ends -->
							</ul>
						</li>
						<!-- User Account Section Ends -->
					</ul>
				</div>
			</nav>
		</header>
		<!-- Header Section Ends -->
        
		<!-- Sidebar Section Starts -->
		<aside class="main-sidebar">
			<div class="nano">
				<div class="nano-content">
					<ul class="sidebar-menu" data-widget="tree">
						<li class="header">MAIN NAVIGATION</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-dashboard"></i> <span>Dashboard</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
								<li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-files-o"></i>
								<span>Layout Options</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
								<li><a href="../../pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
							</ul>
						</li>
						
						<li class="treeview">
							<a href="#">
								<i class="fa fa-pie-chart"></i>
								<span>Charts</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> 
										<span>ChartJS</span>
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/charts/pie-chart.html"><i class="fa fa-circle-o"></i> Pie Chart</a></li>
										<li><a href="../../pages/charts/line-chart.html"><i class="fa fa-circle-o"></i> Line Chart</a></li>
										<li><a href="../../pages/charts/bar-chart.html"><i class="fa fa-circle-o"></i> Bar Chart</a></li>
									</ul>
								</li>
								<li><a href="../../pages/charts/sparkline.html"><i class="fa fa-circle-o"></i> Sparkline</a></li>
								<li><a href="../../pages/charts/flot-chart.html"><i class="fa fa-circle-o"></i> Flot Charts</a></li>
								
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-laptop"></i>
								<span>UI Elements</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								
								<li><a href="../../pages/elements/font-awesome-icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
								<li><a href="../../pages/elements/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
								<li><a href="../../pages/elements/hr-timeline.html"><i class="fa fa-circle-o"></i> Horizontal Timeline</a></li>
								<li><a href="../../pages/elements/timeline.html"><i class="fa fa-circle-o"></i> Vertical Timeline</a></li>
								<li><a href="../../pages/elements/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
								<li><a href="../../pages/elements/sweet-alert.html"><i class="fa fa-circle-o"></i> Sweet Alerts</a></li>
								<li><a href="../../pages/elements/accordion.html"><i class="fa fa-circle-o"></i> Accordions</a></li>
								<li><a href="../../pages/elements/progressbars.html"><i class="fa fa-circle-o"></i> Progress Bars</a></li>
								<li><a href="../../pages/elements/toastr.html"><i class="fa fa-circle-o"></i> Toastr</a></li>
								<li><a href="../../pages/elements/alerts.html"><i class="fa fa-circle-o"></i> Alert Box</a></li>
								<li><a href="../../pages/elements/tooltip.html"><i class="fa fa-circle-o"></i> Tool Tip</a></li>
								<li><a href="../../pages/elements/knob.html"><i class="fa fa-circle-o"></i> Knob</a></li>
								<li><a href="../../pages/elements/slider.html"><i class="fa fa-circle-o"></i> Carousel</a></li>
								<li><a href="../../pages/elements/pricing-table.html"><i class="fa fa-circle-o"></i> Pricing Tables</a></li>
								<li><a href="../../pages/elements/range-slider.html"><i class="fa fa-circle-o"></i> Range Slider</a></li>
								<li><a href="../../pages/elements/dropdowns.html"><i class="fa fa-circle-o"></i> Dropdowns</a></li>
								<li><a href="../../pages/elements/grid-list.html"><i class="fa fa-circle-o"></i> Grid/List</a></li>
								<li><a href="../../pages/elements/list-group.html"><i class="fa fa-circle-o"></i> List Group</a></li>
								<li><a href="../../pages/elements/cards.html"><i class="fa fa-circle-o"></i> Cards</a></li>
								<li><a href="../../pages/elements/tabs.html"><i class="fa fa-circle-o"></i> Tabs & Pills</a></li>
							</ul>
						</li>
						<li class="treeview active">
							<a href="#">
								<i class="fa fa-edit"></i> <span>Forms</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li class="active"><a href="../../pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
								<li><a href="../../pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
								<li><a href="../../pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
								<li><a href="../../pages/forms/form-wizard.html"><i class="fa fa-circle-o"></i> Form Wizard</a></li><li><a href="../../pages/forms/file-upload.html"><i class="fa fa-circle-o"></i> File Upload</a></li>
								<li><a href="../../pages/forms/form-mask.html"><i class="fa fa-circle-o"></i> Formatter</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-table"></i> <span>Tables</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/tables/basic.html"><i class="fa fa-circle-o"></i> Basic tables</a></li>
								<li><a href="../../pages/tables/advanced.html"><i class="fa fa-circle-o"></i> Adavanced tables</a></li>
								<li><a href="../../pages/tables/nestable.html"><i class="fa fa-circle-o"></i> NesTable</a></li>
								<li><a href="../../pages/tables/jsgrid.html"><i class="fa fa-circle-o"></i> JS Grid</a></li>
							</ul>
						</li>
						<li>
							<a href="../../pages/calendar.html">
								<i class="fa fa-calendar"></i> <span>Calendar</span>
							</a>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-envelope"></i> <span>Mailbox</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/mailbox/inbox.html"><i class="fa fa-circle-o"></i> Inbox</a></li>
								<li><a href="../../pages/mailbox/compose.html"><i class="fa fa-circle-o"></i> Compose</a></li>
								<li><a href="../../pages/mailbox/read-mail.html"><i class="fa fa-circle-o"></i> Read</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-map-o"></i> <span>Maps</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/maps/google-map.html"><i class="fa fa-circle-o"></i> Google Map</a></li>
								<li><a href="../../pages/maps/jvector-map.html"><i class="fa fa-circle-o"></i> jVector Map</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-folder"></i> <span>Custom Pages</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/custompages/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
								<li><a href="../../pages/custompages/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Login
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/custompages/login1.html"><i class="fa fa-circle-o"></i> Login Page 1</a></li>
										<li><a href="../../pages/custompages/login2.html"><i class="fa fa-circle-o"></i> Login Page 2</a></li>
										<li><a href="../../pages/custompages/login3.html"><i class="fa fa-circle-o"></i> Login Page 3</a></li>
									</ul>
								</li>
								<li><a href="../../pages/custompages/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
								<li><a href="../../pages/custompages/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
								<li><a href="../../pages/custompages/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
								<li><a href="../../pages/custompages/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
								<li><a href="../../pages/custompages/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-share"></i> <span>Multilevel</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Level One
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
										<li class="treeview">
											<a href="#"><i class="fa fa-circle-o"></i> Level Two
												<span class="pull-right-container">
													<i class="fa fa-angle-left pull-right"></i>
												</span>
											</a>
											<ul class="treeview-menu">
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
							</ul>
						</li>
						
						<li class="header">LABELS</li>
						<li><a href="#"><i class="fa fa-circle-o text-danger"></i> <span>Important</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-warning"></i> <span>Warning</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-info"></i> <span>Information</span></a></li>
					</ul>
				</div>
			</div>
		</aside>
		<!-- Sidebar Section Ends -->
		
		<!-- Page Content Starts-->
		<div class="content-wrapper">
			<section class="content-header">
				<h1>
					General
					<small>Forms</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="../../index.html"><i class="fa fa-dashboard"></i> Home</a></li>
					<li><a href="#">Forms</a></li>
					<li class="active">General</li>
				</ol>
			</section>
			<div class="row">
				<div class="col-md-12 col-lg-6">
					<div class="cardbg">
						<form>
							<div class="form-group">
								<label for="exampleInputEmail1">Email address</label>
								<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
								<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">Password</label>
								<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
							</div>
							<div class="form-group">
								<label for="exampleFormControlFile1">Example file input</label>
								<input type="file" class="form-control-file" id="exampleFormControlFile1">
							</div>
							<div class="form-check">
								<input type="checkbox" class="form-check-input" id="exampleCheck1">
								<label class="form-check-label" for="exampleCheck1">Check me out</label>
							</div>
							<button type="submit" class="btn btn-primary">Submit</button>
						</form>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-group">
								<label for="exampleFormControlInput1">Email address</label>
								<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
							</div>
							<div class="form-group">
								<label for="exampleFormControlSelect1">Example select</label>
								<select class="form-control" id="exampleFormControlSelect1">
								  <option>1</option>
								  <option>2</option>
								  <option>3</option>
								  <option>4</option>
								  <option>5</option>
								</select>
							</div>
							<div class="form-group">
								<label for="exampleFormControlSelect2">Example multiple select</label>
								<select multiple class="form-control" id="exampleFormControlSelect2">
								  <option>1</option>
								  <option>2</option>
								  <option>3</option>
								  <option>4</option>
								  <option>5</option>
								</select>
							</div>
							<div class="form-group">
								<label for="exampleFormControlTextarea1">Example textarea</label>
								<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
							</div>
						</form>
					</div>
					<div class="cardbg">
						<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
						<input class="form-control" type="text" placeholder="Default input">
						<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
					</div>
					<div class="cardbg">
						<select class="form-control form-control-lg">
							<option>Large select</option>
						</select>
						<select class="form-control">
							<option>Default select</option>
						</select>
						<select class="form-control form-control-sm">
							<option>Small select</option>
						</select>
					</div>
					<div class="cardbg">
						<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-group row">
								<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
								<div class="col-sm-10">
									<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
								</div>
							  </div>
							  <div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="inputPassword" placeholder="Password">
								</div>
							</div>
						</form>
					</div>
					<div class="cardbg">
						<form class="form-inline">
							<div class="form-group mb-2">
								<label for="staticEmail2" class="sr-only">Email</label>
								<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
							</div>
							<div class="form-group mx-sm-3 mb-2">
								<label for="inputPassword2" class="sr-only">Password</label>
								<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
							</div>
							<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
						</form>	
					</div>
					<div class="cardbg">
						<div class="form-check">
							<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
							<label class="form-check-label" for="defaultCheck1">
								Default checkbox
							</label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
							<label class="form-check-label" for="defaultCheck2">
								Disabled checkbox
							</label>
						</div>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-group row">
								<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
								<div class="col-sm-10">
									<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
								</div>
							</div>
							<div class="form-group row">
								<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
								<div class="col-sm-10">
									<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
								</div>
							</div>
							<div class="form-group row">
								<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
								<div class="col-sm-10">
									<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
								</div>
							</div>
						</form>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-row">
								<div class="col-md-4 mb-3">
									<label for="validationDefault01">First name</label>
									<input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
								</div>
								<div class="col-md-4 mb-3">
									<label for="validationDefault02">Last name</label>
									<input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
								</div>
								<div class="col-md-4 mb-3">
									<label for="validationDefaultUsername">Username</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text" id="inputGroupPrepend2">@</span>
										</div>
										<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
									</div>
								</div>
							</div>
							<div class="form-row">
								<div class="col-md-6 mb-3">
									<label for="validationDefault03">City</label>
									<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
								</div>
								<div class="col-md-3 mb-3">
									<label for="validationDefault04">State</label>
									<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
								</div>
								<div class="col-md-3 mb-3">
									<label for="validationDefault05">Zip</label>
									<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
								</div>
							</div>
							<div class="form-group">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
									<label class="form-check-label" for="invalidCheck2">
										Agree to terms and conditions
									</label>
								</div>
							</div>
							<button class="btn btn-primary" type="submit">Submit form</button>
						</form>
					</div>
				</div>
				<div class="col-md-12 col-lg-6">
					<div class="cardbg">
						<div class="form-check">
							<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
							<label class="form-check-label" for="exampleRadios1">
								Default radio
							</label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
							<label class="form-check-label" for="exampleRadios2">
								Second default radio
							</label>
						</div>
						<div class="form-check disabled">
							<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
							<label class="form-check-label" for="exampleRadios3">
								Disabled radio
							</label>
						</div>
					</div>
					<div class="cardbg">
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
							<label class="form-check-label" for="inlineCheckbox1">1</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
							<label class="form-check-label" for="inlineCheckbox2">2</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
							<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
						</div>
					</div>
					<div class="cardbg">
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
							<label class="form-check-label" for="inlineRadio1">1</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
							<label class="form-check-label" for="inlineRadio2">2</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
							<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
						</div>
					</div>
					<div class="cardbg">
						<div class="form-check">
							<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
						</div>
						<div class="form-check">
							<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
						</div>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-group">
								<label for="formGroupExampleInput">Example label</label>
								<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
							</div>
							<div class="form-group">
								<label for="formGroupExampleInput2">Another label</label>
								<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
							</div>
						</form>
					</div>
					<div class="cardbg">
						<form>
							<div class="row">
								<div class="col">
									<input type="text" class="form-control" placeholder="First name">
								</div>
								<div class="col">
									<input type="text" class="form-control" placeholder="Last name">
								</div>
						  </div>
						</form>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-row">
								<div class="form-group col-md-6">
									<label for="inputEmail4">Email</label>
									<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
								</div>
								<div class="form-group col-md-6">
									<label for="inputPassword4">Password</label>
									<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
								</div>
							</div>
							<div class="form-group">
								<label for="inputAddress">Address</label>
								<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
							</div>
							<div class="form-group">
								<label for="inputAddress2">Address 2</label>
								<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
							</div>
							<div class="form-row">
								<div class="form-group col-md-6">
									<label for="inputCity">City</label>
									<input type="text" class="form-control" id="inputCity">
								</div>
								<div class="form-group col-md-4">
									<label for="inputState">State</label>
									<select id="inputState" class="form-control">
										<option selected>Choose...</option>
										<option>...</option>
									</select>
								</div>
								<div class="form-group col-md-2">
									<label for="inputZip">Zip</label>
									<input type="text" class="form-control" id="inputZip">
								</div>
							</div>
							<div class="form-group">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" id="gridCheck">
									<label class="form-check-label" for="gridCheck">
										Check me out
									</label>
								</div>
							</div>
							<button type="submit" class="btn btn-primary">Sign in</button>
						</form>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-group row">
								<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
								<div class="col-sm-10">
									<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
								</div>
							</div>
							<div class="form-group row">
								<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
								</div>
							</div>
							<fieldset class="form-group">
								<div class="row">
									<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
									<div class="col-sm-10">
										<div class="form-check">
											<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
											<label class="form-check-label" for="gridRadios1">
												First radio
											</label>
										</div>
										<div class="form-check">
											<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
											<label class="form-check-label" for="gridRadios2">
												Second radio
											</label>
										</div>
										<div class="form-check disabled">
											<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
											<label class="form-check-label" for="gridRadios3">
												Third disabled radio
											</label>
										</div>
									</div>
								</div>
							</fieldset>
							<div class="form-group row">
							<div class="col-sm-2">Checkbox</div>
								<div class="col-sm-10">
									<div class="form-check">
										<input class="form-check-input" type="checkbox" id="gridCheck1">
										<label class="form-check-label" for="gridCheck1">
											Example checkbox
										</label>
									</div>
								</div>
							</div>
							<div class="form-group row">
								<div class="col-sm-10">
									<button type="submit" class="btn btn-primary">Sign in</button>
								</div>
							</div>
						</form>		
					</div>
					<div class="cardbg">
						<form>
							<div class="form-row">
								<div class="col-7">
									<input type="text" class="form-control" placeholder="City">
								</div>
								<div class="col">
									<input type="text" class="form-control" placeholder="State">
								</div>
								<div class="col">
									<input type="text" class="form-control" placeholder="Zip">
								</div>
							</div>
						</form>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-row align-items-center">
								<div class="col-auto">
									<label class="sr-only" for="inlineFormInput">Name</label>
									<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
								</div>
								<div class="col-auto">
									<label class="sr-only" for="inlineFormInputGroup">Username</label>
									<div class="input-group mb-2">
										<div class="input-group-prepend">
											<div class="input-group-text">@</div>
										</div>
										<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
									</div>
								</div>
								<div class="col-auto">
									<div class="form-check mb-2">
										<input class="form-check-input" type="checkbox" id="autoSizingCheck">
										<label class="form-check-label" for="autoSizingCheck">
											Remember me
										</label>
									</div>
								</div>
								<div class="col-auto">
									<button type="submit" class="btn btn-primary mb-2">Submit</button>
								</div>
							</div>
						</form>
					</div>
					<div class="cardbg">
						<form>
							<div class="form-row align-items-center">
								<div class="col-sm-3 my-1">
									<label class="sr-only" for="inlineFormInputName">Name</label>
									<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
								</div>
								<div class="col-sm-3 my-1">
									<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<div class="input-group-text">@</div>
										</div>
										<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
									</div>
								</div>
								<div class="col-auto my-1">
									<div class="form-check">
										<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
										<label class="form-check-label" for="autoSizingCheck2">
											Remember me
										</label>
									</div>
								</div>
								<div class="col-auto my-1">
									<button type="submit" class="btn btn-primary">Submit</button>
								</div>
							</div>
						</form>
					</div>
					<div class="cardbg">
						<form class="needs-validation" novalidate>
							<div class="form-row">
								<div class="col-md-4 mb-3">
									<label for="validationCustom01">First name</label>
									<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
									<div class="valid-feedback">
										Looks good!
									</div>
								</div>
								<div class="col-md-4 mb-3">
									<label for="validationCustom02">Last name</label>
									<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
									<div class="valid-feedback">
										Looks good!
									</div>
								</div>
								<div class="col-md-4 mb-3">
									<label for="validationCustomUsername">Username</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text" id="inputGroupPrepend">@</span>
										</div>
											<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
										<div class="invalid-feedback">
											Please choose a username.
										</div>
									</div>
								</div>
							</div>
							<div class="form-row">
								<div class="col-md-6 mb-3">
									<label for="validationCustom03">City</label>
									<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
									<div class="invalid-feedback">
										Please provide a valid city.
									</div>
								</div>
								<div class="col-md-3 mb-3">
									<label for="validationCustom04">State</label>
									<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
									<div class="invalid-feedback">
										Please provide a valid state.
									</div>
								</div>
								<div class="col-md-3 mb-3">
									<label for="validationCustom05">Zip</label>
									<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
									<div class="invalid-feedback">
										Please provide a valid zip.
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
									<label class="form-check-label" for="invalidCheck">
										Agree to terms and conditions
									</label>
									<div class="invalid-feedback">
										You must agree before submitting.
									</div>
								</div>
							</div>
							<button class="btn btn-primary" type="submit">Submit form</button>
						</form>
						<script>
						// Example starter JavaScript for disabling form submissions if there are invalid fields
						(function() {
						  'use strict';
						  window.addEventListener('load', function() {
							// Fetch all the forms we want to apply custom Bootstrap validation styles to
							var forms = document.getElementsByClassName('needs-validation');
							// Loop over them and prevent submission
							var validation = Array.prototype.filter.call(forms, function(form) {
							  form.addEventListener('submit', function(event) {
								if (form.checkValidity() === false) {
								  event.preventDefault();
								  event.stopPropagation();
								}
								form.classList.add('was-validated');
							  }, false);
							});
						  }, false);
						})();
						</script>
					</div>
				</div>
			</div>			
		</div>
		<!-- Page Content Ends-->
		
		<!-- Back to Top Starts -->
		<a href="javascript:" id="return-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
		<!-- Back to Top Ends -->
		
		<!-- Footer Section Starts -->
		<footer class="main-footer">
			<div class="pull-right hidden-xs">
			  Version 1.0.0
			</div>
			<p class="mb-0">Copyright © 2019 <a target="_blank" href="http://www.bootstrapmb.com/">Perfectus Inc</a>. All rights
			reserved.</p>
		</footer>
		<!-- Footer Section Ends -->
		
	</div>
	<!-- jQuery CDN - Slim version (=without AJAX) -->
	<script src="../../assets/js/jquery/slim.min.js"></script>
	<!-- Popper.JS -->
	<script src="../../assets/js/jquery/popper.min.js"></script>
	<!-- Bootstrap JS -->
	<script src="http://cdn.bootstrapmb.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	<script src="../../assets/js/jquery/jquery.min.js"></script>
	<!-- Theme JS -->
	<script src="../../assets/js/nanoscroller/nanoscroller.js"></script>
	<script src="../../assets/js/custom/theme.js"></script>
</body>

</html>
